<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-10-18 13:34:38
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-11-21 14:29:54
 * @FilePath: \ZHGD-Vue2\src\views\components\workSiteLeft\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="workSiteLeftPage">
    <div v-if="showInput">
      <el-input
        v-model="deptName"
        placeholder="请输入标段"
        clearable
        size="mini"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>

    <div>
      <el-tree
        :data="deptOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        node-key="id"
        default-expand-all
        empty-text="加载中..."
        highlight-current
        @node-click="handleNodeClick"
      />
    </div>
  </div>
</template>

<script>
import { businessDeptTree } from "@/api/common/common";
export default {
  name: "workSiteLeft",
  props: {
    firstId: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: true,
    },
    showInput: {
      type: Boolean,
      default: false,
    },
    // deptOptions: {
    //   type: Array,
    //   default: []
    // }
  },
  data() {
    return {
      // 标段名称
      deptName: undefined,
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    deptName(val) {
      // console.log(val);
      // this.$refs.tree.filter(val);
    },

    firstId: {
      handler(val, oldVal) {
        // console.log(1231312);
        if (val) {
          // console.log(12321312);
          // this.loading = true
        } else {
          // console.log("sdahfjksadhfjkasd");
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getList();
  },

  mounted() {},

  activated: function () {},

  beforeDestroy() {},

  methods: {
    getList() {
      businessDeptTree().then((res) => {
        this.deptOptions = res.data;
        if (this.firstId) {
          this.$emit("getFirstId", res.data[0].id);
        }
        this.$emit("offerDeptTree", res.data);
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      // console.log(data);
      // this.handleQuery();
      this.$emit("queryVal", data);
    },
    handleShow() {
      this.$emit("showLeft", !this.show);
    },
    resetQuery() {
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(null);
      });
    },
  },

};
</script>

<style scoped lang="scss">
.workSiteLeftPage {
  height: calc(100vh - 120px);
  overflow: auto;
  border: 1px solid #dcdfe6;
  border-radius: 12px;
  // padding-left: 20px;
}
</style>

<style lang="scss">
</style>
